import React from 'react';
import styles from './item.module.css'
import { useNavigate } from 'react-router-dom';
const Index = (props) => {
    const Navigate = useNavigate()
    const handleDetail = (id) => {
        Navigate(`/detail/${id}`)
    }
    return (
        <div className={styles.page}>
            <div className={styles.header}>
                <div>{props.title}</div>
                <div>更多</div>
            </div>
            <div className={styles.container}>
                {
                    props.arr.map(item => {
                        return (
                            <div key={item.id} className={styles.item} onClick={() => { handleDetail(item.id) }}>
                                <img src={item.coverImgUrl ? item.coverImgUrl : item.picUrl} alt="" />
                                <p> {item.name}</p>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    );
}

export default Index;
